import React, { useState } from 'react';
import styles from './index.less';
import Top from './top';
import Header from './header';
import Container from './container';
import ToolBar from './toolBar';
import BannerBox from './bannerBox';
import { flashImg } from './base64'
import CountDown from '../../components/countDown'
import SliderBox from '../../components/sliderBox'
import List8 from './list8'
import { connect } from 'umi'
import Agreement from '../../widgets/agreement'

export default connect(({ global }: any) => ({ global }))((props: any) => {

  const [promptText, setPromptText] = useState('距离结束还有')
  const togglePopup = (visable: boolean) => {
    props.dispatch({
      type: "global/visableToggle",
      payload: visable
    })
  }

  return (
    <div>
      {props.global.agreementPopup && <Agreement closePopup={() => {
        togglePopup(false)
      }} />}
      <Top openPopup={() => {
        togglePopup(true)
      }} />
      <Header />
      <Container />
      <ToolBar />
      <div className={`${styles.main} clearfix`}>
        <div className={styles.content}>
          <div className={`${styles.flashSales} clearfix`}>
            <h2>小米闪购</h2>
            <div>
              <div className={styles.flashTime}>
                <div className={styles.time}>20:00场</div>
                <img src={flashImg} alt="" />
                <span className={styles.desc}>{promptText}</span>
                <CountDown sec={10} onDone={() => {
                  setPromptText('本场已结束');
                }} />
              </div>
              <SliderBox />
            </div>
          </div>
          <BannerBox />
          <div>
            <div style={{ width: "234px", height: "614px", float: "left" }}>
              <img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/574c6643ab91c6618bfb2d0e2c761d0b.jpg?thumb=1&amp;w=234&amp;h=614&amp;f=webp&amp;q=90" />
            </div>
            <List8 />
          </div>
        </div>
      </div>
    </div>
  );
})
